<template>
  <div class="columns oolong-container">
    <div class="oolong-leftNav">
      <ul class="oolong-leftNav-menu">
        <li v-for="(levelOne0ption,levelOne0ption_index) in menuData">
          <a @click="unfold(menuData,levelOne0ption_index)">
            <oolongIcon type="navicon-round"></oolongIcon>
            <span>{{levelOne0ption.name}}</span>
          </a>
          <ul>
            <li v-for="(levelTwo0ption,levelTwo0ption_index) in levelOne0ption.menuChild" v-show="levelTwo0ption.show">
              <!--<router-link :to="{ path:levelTwo0ption.url, exact: true }"-->
              <!--@click="selectedOption(levelOne0ption.id,levelTwo0ption_index)">-->
              <a @click="unfold(levelOne0ption.menuChild,levelTwo0ption_index)">
                <span :class="{active:levelTwo0ption.iscur}">{{levelTwo0ption.name}}</span>
              </a>
              <!--</router-link>-->
              <ul>
                <li v-for="(levelThree0ption,levelThree0ption_index) in levelTwo0ption.menuChild"
                    v-show="levelThree0ption.show">
                  <router-link :to="{ path:levelThree0ption.url, exact: true }"
                               @click="selectedOption(levelTwo0ption.id,levelThree0ption_index)">
                    <span :class="{active:levelThree0ption.iscur}">{{levelThree0ption.name}}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="column oolong-rightContent">
      <router-view :url="url" :type="type"></router-view>
    </div>
  </div>
</template>

<script>
  import "../resources/css/admin-template/oolong-container.scss"

  export default{
    data(){
      return {
        //服务ip
        url: "http://192.168.1.114:8070",
        //type:"pro" : 连接服务
        //type:"dev" : 本地数据
        type: "dev",
        menuData: [
          {
            name: 'Vuejs组件列表', id: '1', iscur: false, menuChild: [
            {
              name: 'Basic', id: '1.1', iscur: false, show: true, url: '/Basic', menuChild: [
              {
                name: 'Color色彩', id: '1.1.1', iscur: false, show: false, url: '/Color'
              },
              {
                name: 'Button按钮', id: '1.1.2', iscur: false, show: false, url: '/Button'
              }
            ]
            },
            {
              name: 'View', id: '1.2', iscur: false, show: true, url: '/View', menuChild: [
              {
                name: 'Tag标签', id: '1.2.1', iscur: false, show: false, url: '/Tag'
              },
              {
                name: 'ColorBox色彩板', id: '1.2.2', iscur: false, show: false, url: '/ColorBox'
              },
              {
                name: 'Panel面板', id: '1.2.3', iscur: false, show: false, url: '/Panel'
              },
              {
                name: 'Table表格', id: '1.2.4', iscur: false, show: false, url: '/Table'
              },
              {
                name: 'Tree树形', id: '1.2.5', iscur: false, show: false, url: '/Tree'
              },{
                name: 'TreeNew', id: '1.2.5', iscur: false, show: false, url: '/TreeNew'
              },
              {
                name: 'Life', id: '1.2.5', iscur: false, show: false, url: '/life'
              },
              {
                name: 'Notice通知', id: '1.2.6', iscur: false, show: false, url: '/Notice'
              },
              {
                name: 'Dialog对话框', id: '1.2.7', iscur: false, show: false, url: '/Dialog'
              },
              {
                name: 'Tooltip文字提示', id: '1.2.8', iscur: false, show: false, url: '/Tooltip'
              },
              {
                name: 'Poptip气泡提示', id: '1.2.9', iscur: false, show: false, url: '/Poptip'
              },
              {
                name: 'LoadingBar加载进度条', id: '1.2.10', iscur: false, show: false, url: '/LoadingBar'
              },{
                name: 'spin加载中', id: '1.1.1', iscur: false, show: false, url: '/spin'
              },{
                name: 'Collapse 折叠面板', id: '1.1.1', iscur: false, show: false, url: '/collapse'
              }
            ]
            },
            {
              name: 'Form', id: '1.3', iscur: false, show: true, url: '/Form', menuChild: [
              {
                name: 'Select选择框', id: '1.3.1', iscur: false, show: false, url: '/Select'
              },
              {
                name: 'Input输入框', id: '1.3.2', iscur: false, show: false, url: '/Input'
              },
              {
                name: 'Radio单选框', id: '1.3.3', iscur: false, show: false, url: '/Radio'
              },
              {
                name: 'Checkbox多选框', id: '1.3.4', iscur: false, show: false, url: '/Checkbox'
              },
              {
                name: 'Switch开关', id: '1.3.5', iscur: false, show: false, url: '/Switch'
              },
              {
                name: 'Slider滑块', id: '1.3.6', iscur: false, show: false, url: '/Slider'
              },
              {
                name: 'DatePicker日期选择器', id: '1.3.7', iscur: false, show: false, url: '/DatePicker'
              },
              {
                name: 'TimePicker时间选择器', id: '1.3.8', iscur: false, show: false, url: '/TimePicker'
              },
              {
                name: 'Transfer穿梭', id: '1.3.9', iscur: false, show: false, url: '/Transfer'
              },
              {
                name: 'Form表单', id: '1.3.10', iscur: false, show: false, url: '/Form'
              }
            ]
            },
            {
              name: 'Navigation', id: '1.4', iscur: false, show: true, url: '/Navigation', menuChild: [
              {
                name: 'Breadcrumb面包屑', id: '1.4.1', iscur: false, show: false, url: '/Breadcrumb', menuChild: []
              },
              {
                name: 'Menu菜单', id: '1.4.2', iscur: false, show: false, url: '/Menu', menuChild: []
              },
              {
                name: 'Dropdown下拉菜单', id: '1.4.3', iscur: false, show: false, url: '/Dropdown', menuChild: []
              },
              {
                name: 'Page分页', id: '1.4.4', iscur: false, show: false, url: '/Page', menuChild: []
              },
              {
                name: 'Tabs标签', id: '1.4.5', iscur: false, show: false, url: '/Tabs', menuChild: []
              }
            ]
            }
          ]
          }
        ]
      }
    },
    methods: {
      unfold: function (array, index) {
        array.map(function (v, i) {
          if (i == index) {
            v.iscur = true;
            v.menuChild.map(function (value1, index1) {
              value1.show = value1.show ? false : true;
            });
          } else {
            v.iscur = false;
          }
        });
      },
      //选中样式设置
      selectedOption: function (num, index) {
        this.menuData.map(function (v, i) {
          if (v.id == num) {
            v.menuChild.map(function (m, n) {
              n == index ? m.iscur = true : m.iscur = false;
            });
          } else {
            v.menuChild.map(function (m, n) {
              m.iscur = false;
            });
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>


</style>
